<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispatchMonitoring</title>

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/tabstyle.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/iconfont.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/change_form.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css"/>
    <style>
        .jstree-anchor {
            position:relative;
        }
        .jstree-themeicon{
            position:absolute;
            float:right;
        }
        .icon-sub {
            color: #b400ff;
            font-size: 28px;
        }
    </style>
</head>
<body class="gray contentPadding">
<div class="left_tree hFill">
    <div class="form-horizontal" role="form">
        <div class="form">
            <label class="control-label">目录:</label>

            <div>
                <select class="selectpicker bs-select form-control">
                    <option>运行中</option>
                    <option>已停止</option>
                    <option>不限</option>
                </select>
            </div>

            <div class="left_tree_se">
                <input type="text" id="plugins4_q" class=" input-small input-inline">
                <i class="fa fa-search search-icon"></i>
            </div>
        </div>
    </div>
    <!-- ======================================   tree开始  ====================================================== -->
    <div class="portlet-body">
        <div id="tree_3" >
        </div>
    </div>
    <!-- ======================================   tree结束  ====================================================== -->
</div>
<div class="right_tbale hFill">
    <div class="portlet-body hFill pon_relative">
        <div class="top_nav">
            <div class="left_navs ">
                <div class="middle_navs" style="margin-left: 0; border-left: 1px solid #ddd">
                    <div id="page-tab-content">	<ul id="menu-list" class="nav nav-pills ">
                    </ul></div></div>
                <button class="tab-btn fa fa-angle-left" id="page-prev"></button>
                <button class="tab-btn  fa fa-angle-right" id="page-next"></button>
            </div>
        </div>
        <div class="tab-content portlet_list">

        </div>
    </div>

</div>

</body>
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>

<script src="../../assets/global/scripts/app.min.js" type="text/javascript"></script>

<script src="../../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jstree/src/jstree.search.js"></script>

<script src="../../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>

<script src="../../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/layui/layui.all.js"></script>

<script src="../../assets/custom/js/tab.js"></script>

<script>
    'use strict';
   var tuid = ""; //任务单元id(子页面参数)
   var parentTuExcuteId = ""; //子页面参数

    var dispatchMonitoring = function () {
        //请求ip
        var requestUrl = 'http://192.168.0.130:8094';
        //tree的数据转换
        var dataJson = function (result) {
            var arr = [] ;
            var obj = {
                "id": 8899,
                "parent": "#", //最上层父类id为 #
                "state": {"opened": true}, //默认展开所有
                "text": "任务单元"
            };
            arr.push(obj);
            for (var i = 0; i < result.data.length; i++) {
                var objSub = {
                    "id": result.data[i].tuId,
                    "parent": 8899, //最上层父类id为 #
                    "state": {"opened": true}, //默认展开所有
                    "text": result.data[i].tuName,
                    "type":result.data[i].isSub?"sub":""
                };
                if(i === 0){
                    objSub.state.selected = true
                }
                arr.push(objSub);
            }
            return arr;
        };
        //默认加载第一个子节点
        var addFirstTask = function (result) {
            if(result.data.length > 0){
              var  firstTask = result.data[0];
                var name = firstTask.tuName;
                var url =  '../../assets/custom/draw/monitoringEr.html';
                var this_id = firstTask.tuId +'_anchor';
                addTab(name,url,this_id);

            }
        };
        //tree对象
        var tree = $("#tree_3");

        return {
            treeInit : function (requestObj,isFirst) {
                var requencyType = requestObj.requencyType;
                var layoutType = requestObj.layoutType;
                var bizType = requestObj.bizType;
                var isFinished = requestObj.isFinished;
                var tuName  = requestObj.tuName ;

                $.ajax({
                    type : 'GET',
                    url : requestUrl+'/rest/ts/findTaskUnit',
                    dataType : 'JSON',
                    data: {requencyType:requencyType,layoutType:layoutType,bizType:bizType,isFinished:isFinished,tuName:tuName},
                    success : function (result) {
                        console.log(result);
                        if(isFirst){
                            //加载第一个页面
                            if( result.data.length > 0){
                                tuid = result.data[0].tuId;
                                addFirstTask(result);
                            }
                            //tree初始化
                            tree.jstree({
                                core: {
                                    themes: {
                                        responsive: !1,
                                        "icons" : true,
                                        "dots" : false
                                    },
                                    check_callback: !0,
                                    data : function (obj,callback) {
                                        callback.call(this, dataJson(result))
                                    }
                                },
                                plugins: ['wholerow','types',"search","contextmenu"],
                                "types" : {
                                    "default" : {
                                        "icon" : false
                                    },
                                    "file" : {
                                        "icon" : "glyphicon glyphicon-ok"
                                    },
                                    "sub":{
                                        "icon": 'iconfont icon-sub',
                                        "position": '9 -1'
                                    }
                                },

                            }).bind("select_node.jstree", function(event, data) {
                                var inst = data.instance;
                                var selectedNode = inst.get_node(data.selected);
                                var level = $("#"+selectedNode.id).attr("aria-level");
                                console.log(selectedNode);

                                if( parseInt(level) === 2){

                                    parentTuExcuteId = "";
                                    tuid = selectedNode.id;

                                    var name = data.node.text;
                                    var url = "../../assets/custom/draw/monitoringEr.html";
                                    var id = selectedNode.a_attr.id;

                                    addTab(name,url,id)
                                }
                            });

                        }else {
                            //更新tree
                            tree.jstree(true).settings.core.data = dataJson(result);
                            tree.jstree(true).refresh();
                        }

                    },
                    error : function () {
                        layer.msg("任务单元数据请求失败")
                    }
                })
            }
        }
    }();

    $(document).ready(function () {
        //页面初始化
        var requestObj = {requencyType:0,layoutType:"graph",bizType:"dxflow",isFinished:0,tuName:""};
        dispatchMonitoring.treeInit(requestObj,true);

        //改变状态input获取焦点
        $('.selectpicker').on('changed.bs.select',function(e){
            $("#plugins4_q").focus();

            var statusText = $(".bs-select").find(".selected").find(".text").text();
            if(statusText === "运行中"){
                requestObj.isFinished = 0;
            }else if(statusText === "已停止"){
                requestObj.isFinished = 1;
            }else {
                requestObj.isFinished = "";
            }
            requestObj.tuName = $("#plugins4_q").val();
            dispatchMonitoring.treeInit(requestObj,false);
        });

        //请求任务单元
        $("#plugins4_q").on("keydown",function (event) {

            if (event.keyCode === 13){

                var statusText = $(".bs-select").find(".selected").find(".text").text();
                if(statusText === "运行中"){
                    requestObj.isFinished = 0;
                }else if(statusText === "已停止"){
                    requestObj.isFinished = 1;
                }else {
                    requestObj.isFinished = "";
                }

                requestObj.tuName = this.value;
                dispatchMonitoring.treeInit(requestObj,false);
            }

        });

        //content高度的大小
        tbItemH();
        function tbItemH(){
            var right_tbale_h = $('.right_tbale>.portlet-body').height();
            var top_nav_h = $('.top_nav').outerHeight(true);
            var tbH = right_tbale_h - top_nav_h;
            $('.portlet-body>.tab-content').css({'height':tbH});
        }
        $(window).resize(function(){
            tbItemH();
        });
    });


</script>
</html>